<template>
  <div class="orderDetial">
    <!-- <div class="orderDetial_top">工单详情页</div> -->
    <el-card>
      <div class="orderDetial_inner">
        <div class="orderDetial_right">
          <div class="orderDetial_right_title">
            处理人:{{
              ruleForm.name
            }}
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            创建时间:{{ ruleForm.created_at }}
          </div>
          <div class="orderDetial_right_content">
            <div class="orderDetial_right_content_inner">
              <div class="orderDetial_right_content_inner_left">
                <div>马总 2020年10月8日17:09:09</div>
                <div class="order_inner_text">恒哥,你在吗,送你一套房子</div>
              </div>
              <div class="say_right">
                <div
                  class="orderDetial_right_content_inner_right"
                  v-for="item in userMessage"
                  :key="item.id"
                >
                  <div>{{ ruleForm.name }} {{ item.updated_at }}</div>
                  <div class="order_inner_text">{{ item.message }}</div>
                </div>
              </div>
            </div>
            <div class="orderDetial_right_down">
              <el-form
                :model="messageForm"
                ref="messageForm"
                class="demo-ruleForm"
              >
                <el-form-item prop="message">
                  <el-input
                    v-model="messageForm.message"
                    class="sendMessage"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
                <div class="form_line">
                  <el-form-item prop="message" style="margin-left: 30px">
                    <UploadAvatar @getImage="handlerSuccess" />
                  </el-form-item>
                  <el-form-item prop="message">
                    <el-button @click="sendMessage">发送</el-button>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import UploadAvatar from "../components/UploadAvatar";
import { userSendMessage, userMessageList } from "../utils/api";
export default {
  components: {
    UploadAvatar
  },
  data() {
    return {
      ruleForm: {
        name: "",
        created_at: ""
      },
      // 用户发送消息的数据
      messageForm: {
        message: "",
        appKey: "",
        messageType: "1",
        phone: "17636244310",
        name: "赵恒",
        orderId: ""
      },
      // 工单id
      orderID: "",
      websocket: null,
      // websock
      device_data: "",
      appKeydata: "",
      // 用户信息列表
      userMessage: []
    };
  },
  created() {
    this.orderID = window.sessionStorage.getItem("orderID");
    this.getuserMessageList();
    this.websocketTest();
  },
  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    this.websocket.close(); //离开路由之后断开websocket连接
  },
  methods: {
    // 上传图片成功
    handlerSuccess(val) {
      let fileName = val.lastIndexOf("."); //取到文件名开始到最后一个点的长度
      let fileNameLength = val.length; //取到文件名长度
      let fileFormat = val.substring(fileName + 1, fileNameLength); //截
    },
    // 点击返回
    handlerBack() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/workOrder");
      });
    },

    // 拿到图片地址
    handlerSuccess(val) {},

    // 点击发送信息
    sendMessage() {
      if (this.messageForm.message == "") {
        return this.$message.error("请输入消息内容");
      }
      this.messageForm.orderId = this.orderID;
      this.postRequest(userSendMessage, this.messageForm, "kefu").then(res => {
        if (res.code == 200) {
          this.getuserMessageList();
          this.messageForm.message = "";
          this.$nextTick(() => {
            let msg = document.getElementById("gundong"); // 获取对象
            msg.scrollTop = msg.scrollHeight; // 滚动高度
          });
        }
      });
    },
    // 回车发送消息
    keyDown(e) {
      if (e.keyCode == 13) {
        this.sendMessage();
      }
    },
    //  获取信息列表
    getuserMessageList() {
      const params = {
        pageNumber: 1,
        pageSize: 10,
        appKey: window.sessionStorage.getItem("appkey"),
        name: this.messageForm.name,
        phone: this.messageForm.phone,
        orderId: window.sessionStorage.getItem("orderID"),
        orderContent: this.messageForm.orderContent,
        picVideo: this.messageForm.picVideo,
        type: 1,
        sendType: 1
      };
      this.postRequest(userMessageList, params, "kefu").then(res => {
        if (res.code == 200) {
          this.userMessage = res.data.data;
        }
      });
    },
    // /********** websocket  ****** */
    websocketTest() {
      //初始化websocket
      // var url="ws://123.207.89.57:8282";
      var url = " ws://47.99.74.117:8002";
      this.websocket = new WebSocket(url);
      this.websocket.onmessage = this.websocketonmessage;
      this.websocket.onopen = this.websocketonopen;
      this.websocket.onerror = this.websocketonerror;
      this.websocket.onclose = this.websocketclose;
    },
    websocketonopen() {
      // console.log("连接成功");
      var data = {
        type: "login",
        device_id: 1
      };
      var arr = JSON.stringify(data);
      this.websocket.send(arr);
      // this.heatBeat();
    }, //连接成功
    websocketonerror() {
      // console.log("连接失败");
      this.reconnect();
    }, //连接失败
    websocketclose() {
      // console.log("断开连接");
      this.reconnect();
    },
    websocketonmessage(data) {
      if (JSON.parse(data["data"])["type"] == "tp5") {
        //调接口
      }
      //收到消息会刷新心跳检测，如果一直收到消息，就推迟心跳发送
      this.heatBeat();
    }, //数据接收
    websocketsend(data) {
      // this.websocket.send(JSON.stringify(data));
      this.websocket.send(data);
    },
    reconnect() {
      // if(this.lockReconnect){       //这里很关键，因为连接失败之后之后会相继触发 连接关闭，不然会连接上两个 WebSocket
      //     return
      // }
      // this.lockReconnect = true;
      // this.reconnectData && clearTimeout(this.reconnectData);
      // this.reconnectData = setTimeout(()=>{
      //     this.initWebSocket();
      //     this.lockReconnect = false;
      // },5000)
    },
    heatBeat() {
      // this.timeoutObj && clearTimeout(this.timeoutObj);
      // this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
      // this.timeoutObj = setTimeout(()=>{
      //     this.websocketsend({type:'心跳检测'})   //根据后台要求发送
      //     this.serverTimeoutObj = setTimeout(()=> {
      //         this.websock.close();       //如果  5秒之后我们没有收到 后台返回的心跳检测数据 断开socket，断开后会启动重连机制
      //     }, 5000);
      // }, this.timeout)
    },
    destroyed() {
      // this.lockReconnect = true;
      // this.websock.close()                   //离开路由之后断开websocket连接
      // clearTimeout(this.reconnectData);      //离开清除 timeout
      // clearTimeout(this.timeoutObj);         //离开清除 timeout
      // clearTimeout(this.serverTimeoutObj);   //离开清除 timeout
    }
  }
};
</script>

<style lang="less">
.orderDetial {
  .orderDetial_top {
    font-size: 20px;
    height: 57px;
    background-color: #fff;
    line-height: 57px;
  }
  .orderDetial_inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .orderDetial_left {
      border-right: 1px solid #eeeeee;
      flex: 1.5;
      .demo-ruleForm {
        width: 300px;
        margin: 20px auto;
      }
    }
    .orderDetial_right {
      flex: 2;
      .orderDetial_right_title {
        padding-left: 20px;
        line-height: 50px;
        height: 50px;
        border-bottom: 1px solid #707070;
      }
      .orderDetial_right_content {
        position: relative;
        height: 780px;

        .orderDetial_right_content_inner {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          height: 579px;
          overflow: scroll;
          .orderDetial_right_content_inner_left {
            line-height: 30px;
            margin-left: 20px;
            text-align: left;
            margin-top: 20px;
            .order_inner_text {
              width: 300px;
              border: 1px solid #d4d4d4;
              padding: 10px;
              border-radius: 10px;
            }
          }
          .say_right {
            margin-top: 80px;
            .orderDetial_right_content_inner_right {
              line-height: 30px;
              margin-right: 20px;
              // margin-top: 100px;
              text-align: right;
              .order_inner_text {
                width: 300px;
                border: 1px solid #d4d4d4;
                text-align: left;
                padding: 10px;
                background: #007aff;
                color: #fff;
                border-radius: 10px;
              }
            }
          }
        }
        .orderDetial_right_down {
          border-top: 1px solid #707070;
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          .demo-ruleForm {
            .el-input /deep/ .el-input__inner {
              width: 100%;
              height: 100px;
              border: none;
            }
            .form_line {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
            }
          }
        }
      }
    }
  }
}
</style>
